<template>
  <div class="home">
    <div class="top">美好生活从此开始</div>
    <van-search v-model="value" shape="round" @focus="toSearch" />
    <div class="van-tabs-box" ref="tabsBox" @scroll="onscroll">
    <van-tabs v-model="active" animated color="#fbb705" @click="onswitch">
      <van-tab
        v-for="(item, index) in tabData"
        :key="index"
        :title="item.title"
        :title-style="active == index ? 'font-size:18px; font-weight:600' : ''"
      >
        <!-- 关注 -->
        <div
          v-if="active == 0"
          class="content"
          ref="content"
        >
            <div
              class="item"
              v-for="(item, index) in itemData"
              :key="index"
              @click="toRecipeDetail(item.item_id)"
            >
              <div class="item-top">
                <div class="item-top-left">
                  <div
                    class="item-top-left-l"
                    @click.stop="toUserDetails(item.u.id)"
                  >
                    <img :src="item.u.p" alt="" />
                  </div>
                  <div class="item-top-left-r">
                    <div class="item-top-left-r-t">
                      <span class="name">{{item.u.n}}</span>
                      <span class="LV"
                        ><i>LV.{{item.u.lvl}}</i></span
                      >
                    </div>
                    <div class="item-top-left-r-b">
                      <span class="followers_count_text">{{
                        item.u.followers_count_text
                      }}</span>
                      <span class="recipes_count_text"
                        ><i>{{ item.u.recipes_count_text }}</i></span
                      >
                    </div>
                  </div>
                </div>

                <div
                  class="item-top-right"
                  style="background: #fbb705"
                  ref="focus"
                  @click.stop="onFocus(item.u.id, index)"
                >
                关注
                </div>
              </div>
              <div class="item-center">
                <img v-if="active == 0" :src="item.img" alt="" />
                <div
                  class="play-icon"
                  v-if="item.video_url && item.video_url != ''"
                >
                  <van-icon
                    class="i"
                    name="play-circle-o"
                    size="40"
                    color="#fff"
                  />
                </div>
              </div>
              <div class="item-bottom">
                <div class="item-bottom-top">
                  <div class="item-bottom-top-left">
                    <img
                      v-for="(item3, index3) in item.collect_users"
                      :key="index3"
                      :src="item3.p"
                      alt=""
                    />
                    <span class="collect_count_text">{{
                      item.collect_count_text
                    }}</span>
                  </div>
                  <div class="item-bottom-top-right">
                    <van-icon class="i" name="star-o" size="25" />
                    <van-icon class="i" name="chat-o" size="25" />
                    <van-icon class="i" name="share-o" size="25" />
                  </div>
                </div>
                <div class="item-bottom-b">
                  <div class="trim_title">{{item.n}}</div>
                  <div v-if="item.events">
                    <div
                      class="events"
                      v-for="(item4, index4) in item.events"
                      :key="index4"
                    >
                      <van-icon :name="eventsIcon" size="17" /><span>{{
                        item4.c
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          <div class="loading" v-if="isloading">
            <van-loading size="24px" color="#fbb705">加载中...</van-loading>
          </div>
        </div>
        <!-- 推荐和视频 -->
        <div
          class="content"
          v-if="active == 1 || active == 2"
          ref="content"
        >
            <van-swipe
              class="my-swipe"
              :autoplay="3000"
              indicator-color="white"
              v-if="active == 1"
            >
              <van-swipe-item v-for="(item, index) in banner" :key="index"
                ><img :src="item.i" alt=""
              /></van-swipe-item>
            </van-swipe>

            <div
              class="item"
              v-for="(item, index) in itemData"
              :key="index"
              @click="toRecipeDetail(item.r.id)"
            >
              <div class="item-top">
                <div class="item-top-left">
                  <div
                    class="item-top-left-l"
                    @click.stop="toUserDetails(item.r.a.id)"
                  >
                    <img :src="item.r.a.p" alt="" />
                  </div>
                  <div class="item-top-left-r">
                    <span class="name">{{ item.r.a.n }}</span>
                    <span class="LV"
                      ><i>LV.{{ item.r.a.lvl }}</i></span
                    >
                  </div>
                </div>
              </div>
              <div class="item-center">
                <img :src="item.r.img" alt="" />
                <div class="play-icon" v-if="item.r.vu && item.r.vu != ''">
                  <van-icon
                    class="i"
                    name="play-circle-o"
                    size="40"
                    color="#fff"
                  />
                </div>
              </div>
              <div class="item-bottom">
                <div class="item-bottom-top">
                  <div class="item-bottom-top-left">
                    <img
                      v-for="(item1, index1) in item.r.collect_users"
                      :key="index1"
                      :src="item1.p"
                      alt=""
                    />
                    <span class="collect_count_text">{{
                      item.r.collect_count_text
                    }}</span>
                  </div>
                  <div class="item-bottom-top-right">
                    <van-icon class="i" name="star-o" size="25" />
                  </div>
                </div>
                <div class="item-bottom-b">
                  <div class="trim_title">{{ item.r.n }}</div>
                  <div v-if="item.r.events">
                    <div
                      class="events"
                      v-for="(item2, index2) in item.r.events"
                      :key="index2"
                    >
                      <van-icon :name="eventsIcon" size="17" /><span>{{
                        item2.c
                      }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          <div class="loading" v-if="isloading">
            <van-loading size="24px" color="#fbb705">加载中...</van-loading>
          </div>
        </div>
        <!-- 活动 -->
        <div
          class="content"
          v-if="active == 3"
          ref="content"
        >
            <van-notice-bar
              left-icon="volume-o"
              :scrollable="false"
              v-if="banner != 0"
            >
              <van-swipe
                vertical
                class="notice-swipe"
                :autoplay="3000"
                :show-indicators="false"
              >
                <van-swipe-item v-for="(item5, index5) in banner" :key="index5"
                  ><span class="nickname">{{ item5.nickname }}</span
                  ><span class="name">{{ item5.name }}</span></van-swipe-item
                >
              </van-swipe>
            </van-notice-bar>

            <div
              v-for="(item6, index6) in itemData"
              :key="index6"
              class="activity"
            >
              <div class="title">{{ item6.title }}:</div>
              <div
                class="item"
                v-for="(item7, index7) in item6.events"
                :key="index7"
              >
                <div class="activity-item-center">
                  <img :src="item7.image" alt="" />
                </div>
                <div class="activity-item-bottom" v-if="active == 3">
                  <div class="name">
                    {{ item7.name }}
                  </div>
                  <div class="participation">立即参与></div>
                </div>
              </div>
            </div>
          <div class="loading" v-if="isloading">
            <van-loading size="24px" color="#fbb705">加载中...</van-loading>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      isLogin: false,
      value: "",
      active: 1,
      isloading: false,
      offset: 0,
      banner: [],
      itemData: [],
      eventsIcon: require("../assets/#.png"),
      isFocus: false,
      tabData: [
        {
          title: "关注",
          url: "home/ffeeds",
        },
        {
          title: "推荐",
          url: "home/recommended",
        },
        {
          title: "视频",
          url: "home/videos",
        },
        {
          title: "活动",
          url: "home/events/getlists",
        },
      ],
      users: [],
      isLoginUser: {
        phone: "",
        password: "",
        isLogin: false,
        Focus: [],
        nickName: "",
        portrait: "",
        gender: 1,
        location: "",
        signature: "",
      },
    };
  },
  created() {
    if (localStorage.getItem("users")) {
      let users = JSON.parse(localStorage.getItem("users"));
      this.users = users;
      users.forEach((ele) => {
        if (ele.isLogin) {
          this.isLogin = true;
          for (let key in this.isLoginUser) {
            this.isLoginUser[key] = ele[key];
          }
        }
      });
    }
    this.getData();
  },
  updated() {
    if (this.active == 0) {
      this.itemData.forEach((ele, index) => {
        this.isLoginUser.Focus.forEach((item) => {
          if (ele.u.id == item) {
            this.$refs.focus[index].innerHTML = "已关注";
            this.$refs.focus[index].style.background = "#eee";
          }
        });
      });
    }
  },
  methods: {
    toSearch() {
      this.$router.push({ name: "Search" });
    },
    getData() {
      this.isloading = true;
      // if (
      //   this.isLogin &&
      //   this.active == 0 &&
      //   this.isLoginUser.Focus.length != 0
      // ) {
      //   this.isLoginUser.Focus.forEach((ele) => {
      //     this.axios({
      //       method: "get",
      //       url: "user/urecipes",
      //       params: {
      //         userid: ele,
      //         offset: this.offset,
      //         limit: 20,
      //       },
      //     }).then(r=>{
      //       console.log(r);
      //       if(r.data!=''){
      //         r.data.result.list.forEach(item=>{
      //         this.itemData.push(item)
      //       })
      //       }
      //     })
      //   });
      // }else{
      this.axios({
        method: "get",
        url: this.tabData[this.active].url,
        params: {
          offset: this.offset,
          limit: 10,
        },
      }).then((result) => {
        if (result.data.state == "success") {
          if (this.active == 1 || this.active == 2) {
            this.banner = result.data.result.banner;
            result.data.result.list.forEach((item) => {
              if (item.type == 1) {
                this.itemData.push(item);
              }
            });
          } else if (this.active == 0) {
            result.data.result.rfs.forEach((item) => {
              this.itemData.push(item);
            });
          }
        }
        if (result.data.status == "OK") {
          if (result.data.data.banner) {
            this.banner = result.data.data.banner;
          }
          if (result.data.data.ongoing) {
            this.itemData.push(result.data.data.ongoing);
          }
          if (result.data.data.ended) {
            this.itemData.push(result.data.data.ended);
          }
        }
        this.isloading = false;
        this.offset += 10;
      });
      // }
    },
    onswitch() {
      this.banner = [];
      this.itemData = [];
      this.offset = 0;
      this.getData();
    },
    loadingMore() {
      this.getData();
    },
    onscroll(e) {
      const tabsBox = this.$refs.tabsBox.offsetHeight
      const contentHeight = this.$refs.content[0].offsetHeight;
      if (
        contentHeight - (e.target.scrollTop + tabsBox) < 50 &&
        !this.isloading
      ) {
        this.getData();
      }
    },
    toRecipeDetail(id) {
      this.$router.push({ name: "RecipeDetail", query: { id } });
    },
    toUserDetails(id) {
      this.$router.push({ name: "UserDetails", query: { id } });
    },
    onFocus(id, index) {
      if (this.isLogin) {
        this.users.forEach((ele) => {
          if (ele.isLogin) {
            if (this.$refs.focus[index].innerText == "关注") {
              this.$refs.focus[index].innerText = "已关注";
              this.$refs.focus[index].style.background = "#eee";
              ele.Focus.push(id);
            } else {
              this.$refs.focus[index].innerText = "关注";
              this.$refs.focus[index].style.background = "#fbb705";
              ele.Focus.forEach((item, index) => {
                if (item == id) {
                  ele.Focus.splice(index, 1);
                }
              });
            }
          }
        });
        localStorage.setItem("users", JSON.stringify(this.users));
      } else {
        this.$dialog
          .confirm({
            title: "您尚未登录",
            message: "请登录后再试",
          })
          .then(() => {
            this.$router.push({ name: "Login" });
          })
          .catch(() => {});
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  .top {
    font-size: 22px;
    font-weight: 600;
    padding: 40px 20px 0;
    background-color: #fbb705;
  }
  .van-search{
    background-color: #fbb705;
  }
  .van-tabs-box{
    position: fixed;
    top: 123px;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow-y: auto;
    /deep/.van-tabs__wrap{
      position: fixed;
      top: 123px;
      left: 0;
      right: 0;
      z-index: 999;
    }
  }
  .content {
    width: 100%;
    margin-top: 44px;
    .my-swipe .van-swipe-item {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .notice-swipe {
      height: 40px;
      line-height: 40px;
      span {
        margin-right: 10px;
      }
      .nickname {
        color: #fbb705;
        font-weight: 600;
      }
    }
    .activity {
      margin-bottom: 10px;
      .title {
        font-size: 20px;
        font-weight: 600;
        color: #fbb705;
        background-color: #fff;
        padding: 5px 0;
      }
    }
    .more {
      width: 100%;
      padding: 10px 0;
      text-align: center;
      font-size: 15px;
    }
    .loading {
      width: 100%;
      margin-top: 10px;
      text-align: center;
    }
    .item {
      padding: 10px 0;
      background-color: #fff;
      .item-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 15px;
        .item-top-left {
          display: flex;
          align-items: center;
          .item-top-left-l {
            img {
              width: 35px;
              height: 35px;
              border-radius: 50%;
            }
          }
          .item-top-left-r {
            margin: 0 10px;
            span {
              font-size: 10px;
            }
            .LV {
              margin-left: 10px;
              color: #fbb705;
              font-weight: 600;
            }
            .item-top-left-r-b {
              span {
                color: #999;
                margin-right: 15px;
              }
            }
          }
        }
        .item-top-right {
          width: 50px;
          text-align: center;
          background-color: #fbb705;
          padding: 5px;
          border-radius: 20px;
        }
      }
      .item-center {
        width: 100%;
        position: relative;
        img {
          width: 100%;
        }
        .play-icon {
          position: absolute;
          top: calc(50% - 20px);
          left: calc(50% - 20px);
        }
      }
      .activity-item-center {
        padding: 10px;
        img {
          width: 100%;
          border-radius: 10px;
        }
      }
      .item-bottom {
        padding: 10px 15px;
        .item-bottom-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          .item-bottom-top-left {
            display: flex;
            align-items: center;
            img {
              width: 20px;
              height: 20px;
              border-radius: 50%;
              margin-left: -5px;
            }
            .collect_count_text {
              margin-left: 10px;
            }
          }
          .item-bottom-top-right {
            .i {
              margin-left: 10px;
            }
          }
        }
        .item-bottom-b {
          .trim_title {
            margin: 10px 0;
          }
          .events {
            display: flex;
            align-items: center;
            color: #1daca9;
          }
        }
      }
      .activity-item-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        .name {
          width: 70%;
          font-size: 15px;
        }
        .participation {
          font-size: 15px;
          color: #1daca9;
        }
      }
    }
  }
}
</style>